<template>
  <div
    class="flow-center"
    style="height: 100%;"
  >
    <fks-tabs
      v-model="activeName"
      class="tabs-wrapper"
    >
      <fks-tab-pane
        :label="LANG.CC_RECEIVED"
        name="recevierPage"
      />
      <fks-tab-pane
        :label="LANG.INITIATED_CC"
        name="SenderPage"
      />
    </fks-tabs>
    <component
      :is="activeName"
      class="content-wrapper"
    />
    <router-view />
  </div>
</template>
<script>
import RecevierPage from './components/RecevierPage'
import SenderPage from './components/SenderPage'
import Mix from '@/mixins/module'

export default {
  name: 'Circulation',
  components: {
    RecevierPage,
    SenderPage
  },
  mixins: [Mix],
  data() {
    return {
      activeName: 'RecevierPage'
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep  .fks-tabs__header {
  margin-bottom: 0;
}

::v-deep  .fks-tabs__nav {
  line-height: 48px;
}

.tabs-wrapper {
  padding: 0 32px;
  background-color: #fff;
}

.content-wrapper {
  height: calc(100% - 48px) !important;
}
</style>
